<!--
 * @Author: caihongtai caihongtai
 * @Date: 2025-03-01 21:16:50
 * @LastEditors: caihongtai caihongtai
 * @LastEditTime: 2025-03-30 23:00:10
 * @FilePath: /ai-interview-vue/src/views/Profile/interviews/detail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <nav-bar title="面试详情" />
    <div class="interviews-detail">
        <div class="evaluate-list">
            <div class="evaluate-item">
                <div class="evaluate-title">
                    面试得分
                    <img src="/images/mine/jobs/interviews-star.png" />
                </div>
                <radar-chart class="chart-container" :data="chartData" :indicators="indicators"
                    :score="totalScore"></radar-chart>
            </div>
            <div class="evaluate-item" v-if="proj_comm_suggest && proj_comm_suggest.suggestion">
                <div class="evaluate-title">
                    沟通表达<img src="/images/mine/jobs/interviews-star.png" />
                </div>
                <div class="evaluate-content">
                    {{proj_comm_suggest.suggestion.communication}}
                </div>
            </div>
            <div class="evaluate-item" v-if="proj_comm_suggest && proj_comm_suggest.suggestion">
                <div class="evaluate-title">
                    项目经验
                    <img src="/images/mine/jobs/interviews-star.png" />
                </div>
                <div class="evaluate-content">
                    {{proj_comm_suggest.suggestion.project_experienced}}
                </div>
            </div>
            <div class="evaluate-item" v-if="teamwork_learn_suggest &&teamwork_learn_suggest.suggestion">
                <div class="evaluate-title">
                    学习能力
                    <img src="/images/mine/jobs/interviews-star.png" />
                </div>
                <div class="evaluate-content">
                    {{teamwork_learn_suggest.suggestion.learning}}
                </div>
            </div>
            <div class="evaluate-item" v-if="teamwork_learn_suggest && teamwork_learn_suggest.suggestion">
                <div class="evaluate-title">
                    团队协作
                    <img src="/images/mine/jobs/interviews-star.png" />
                </div>
                <div class="evaluate-content">
                    {{teamwork_learn_suggest.suggestion.teamwork}}
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>

    import RadarChart from '@/components/RadarChart/index.vue'
    import NavBar from '@/components/NavBar/index.vue'
    import { useRoute } from 'vue-router'
    import { interviewApi } from '@/api/interview'
    const route = useRoute()
    // 定义数据
    const chartData = ref([90, 80, 40, 75, 70, 82]);
    const indicators = [
        { name: '项目经验', max: 100 },
        { name: '沟通表达', max: 100 },
        { name: '专业能力', max: 100 },
        { name: '逻辑能力', max: 100 },
        { name: '团队协作', max: 100 },
        { name: '学习能力', max: 100 },
    ];
    const totalScore = ref(0)
    const proj_comm_suggest = ref({})   // 沟通表达
    const teamwork_learn_suggest = ref({}) // 团队协作
    // 计算总分
    // 计算总分（四舍五入）
    // const totalScore = computed(() => {
    //     const average = chartData.value.reduce((sum, score) => sum + score, 0) / chartData.value.length;
    //     return Math.round(average); // 四舍五入
    // });

    // 获取面试记录详情
    const getRecordDetail = async () => {
        const res = await interviewApi.getRecordDetail({ interview_id: route.query.interview_record_id })
        let { project_exp_score, communication_score, professional_score, logic_score, teamwork_score, learning_score } = res.data
        chartData.value.splice(0, chartData.value.length, project_exp_score, communication_score, professional_score, logic_score, teamwork_score, learning_score)
        totalScore.value = Math.round(res.data.average_score)
        proj_comm_suggest.value = res.data.proj_comm_suggest
        teamwork_learn_suggest.value = res.data.teamwork_learn_suggest

        console.log(res)
    }
    onMounted(() => {
        console.log(route)
        getRecordDetail()
    })
</script>
<style lang="scss" scoped>
    .interviews-detail {
        width: 100%;
        min-height: 100vh;
        padding: 16px;
        background: rgba(255, 255, 255, 1);

        .evaluate-list {
            background: rgba(242, 243, 245, 1);
            border-radius: 22px;
            padding: 12px;
        }

        .evaluate-item {
            border-radius: 16px;
            background: rgba(255, 255, 255, 1);
            /* margin: 12px 12px 0 12px; */
            margin-bottom: 12px;
            padding: 16px;
            color: rgba(29, 33, 41, 1);

            .evaluate-title {
                font-size: 17px;
                font-weight: 500;
                letter-spacing: 0px;
                line-height: 24px;
                color: rgba(29, 33, 41, 1);
                position: relative;
                padding-bottom: 8px;
            }

            img {
                vertical-align: super;
                position: absolute;
                width: 8px;
            }
        }
    }
</style>